<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>节流</title>
    </head>
    <body>
        <input type="button" id="btn" value="按钮" />
        <script>
            var btn = document.getElementById('btn');
            btn.addEventListener('click', trigger(real, 500));
            function real(e) {
                console.log('北极光之夜。');
                console.log(e);
            }
            function trigger(fn, delay) {
                // flag为ture
                var flag = true;
                return function () {
                    // 如果flag为true执行定时器
                    if (flag) {
                        setTimeout(() => {
                            //到规定时间后执行函数，同时 flag = true;
                            fn(...arguments);
                            flag = true;
                        }, delay);
                    }
                    // flag = false;防止一直执行
                    flag = false;
                };
            }
        </script>
        <!-- 防抖就是通过setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发 。
            节流:就是减少一段时间的触发频率。
            防抖与节流最大的区别就是，无论事件触发多么频繁，都可以保证在规定时间内可以执行一次执行函数。 -->
    </body>
</html>
